<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
    <style>
      body {
        overflow: hidden;
      }
      .scroll {
        height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
        border: 1px solid #000;
      }
      .user-join {
        text-align: center;
        margin: 10px 0;
        color: #ccc;
      }
      .user-info {
        display: flex;
        box-sizing: border-box;
        padding: 0 10px;
        margin: 10px 0;
      }
      .user-info-mine {
        flex-direction: row-reverse;
      }
      .user-info-name {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        color: #fff;
        background-color: red;
        align-items: center;
      }
      .user-info-content {
        margin: 0 10px;
        padding: 5px 10px;
        border-radius: 8px;
        background-color: #ccc;
      }
      .user-info-time {
        font-size: 12px;
      }
      .title-bar {
        text-align: center;
        padding: 10px 0;
        background-color: rgb(98, 191, 253);
      }
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .user-list-panel {
        position: absolute;
        height: 450px;
        background-color: #9a9a9a;
        width: 30vw;
        right: 0;
        top: 40px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 5px;
        align-content: flex-start;
        transition: all 0.3s;
        transform: translateX(100%);
      }
      .toggle {
        transform: translateX(0%);
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="user-list-panel" id="userListPanel"></div>
      <div>
        <input
          type="text"
          placeholder="输入昵称加入聊天室"
          id="joinInput"
        /><button id="joinBtn">确定</button>
      </div>
      <div class="user-list">
        <button id="userList">用户列表</button>
      </div>
    </div>

    <div class="title-bar">总人数：<span></span></div>
    <div class="chat-screen scroll" id="chatBox"></div>
    <input type="text" id="textInput" />
    <button id="sendBtn">发送消息</button>
  </body>
  <script>
    const socket = io("http://localhost:3000");
    const joinInput = document.getElementById("joinInput");
    const joinBtn = document.getElementById("joinBtn");
    const textInput = document.getElementById("textInput");
    const sendBtn = document.getElementById("sendBtn");
    const chatBox = document.getElementById("chatBox");
    const userListBtn = document.getElementById("userList");
    const userListPanel = document.getElementById("userListPanel");
    userListBtn.onclick = () => {
      userListPanel.classList.contains("toggle")
        ? userListPanel.classList.remove("toggle")
        : userListPanel.classList.add("toggle");
    };
    const userCountBox = document
      .getElementsByClassName("title-bar")[0]
      .querySelector("span");

    socket.on("messageInfo", ({ users, message }) => {
      setUserCount(users.length);
      if (message.length > 0) {
        chatBox.innerHTML = "";
        message.forEach((data) => setMessage(data));
      }
      if (users.length > 0) {
        userListPanel.innerHTML = "";
        users.forEach((data) => setUser(data));
      }
    });
    const setUser = (data) => {
      let div = document.createElement("div");
      const str = `<div class="user-info-name" style="background: ${
        data.bgColor
      }">
        ${data.name.slice(0, 1)}</div>`;
      div.innerHTML = str;
      userListPanel.appendChild(div);
    };

    const setMessage = (data) => {
      let div = document.createElement("div");
      const str = `
      <div class="user-info ${
        data.name === user?.name ? "user-info-mine" : ""
      }">
        <div class="user-info-name" style="background: ${
          data.bgColor
        }">${data.name.slice(0, 1)}</div>
        <div class="user-info-content">
          <div class="content">${data.value}</div>
          <div class="user-info-time">${dayjs(data.time).format(
            "YYYY-MM-DD HH:mm:ss"
          )}</div>
        </div>
      </div>`;
      div.innerHTML = str;
      chatBox.appendChild(div);
    };
    socket.on("sendMessage", (data) => setMessage(data));
    let user;
    joinBtn.addEventListener("click", () => {
      if (user) return alert("你已加入聊天室");
      let name = joinInput.value;
      if (!name) return alert("请输入用户名");
      socket.emit("joinRoom", name);
    });
    socket.on("join-user", (name) => (user = name));
    socket.on("alreadyJoinedRoom", ({ name, users }) => {
      let div = document.createElement("div");
      const str = `<div class="user-join">【${name}】加入了聊天室</div>`;
      div.innerHTML = str;
      setUserCount(users.length);
      userListPanel.innerHTML = "";
      users.forEach((data) => setUser(data));
      chatBox.appendChild(div);
      joinInput.value = "";
    });
    socket.on("joinRoom", (data) => {
      if (data) return alert(data);
    });

    const setUserCount = (count) => {
      userCountBox.innerText = count;
    };
    sendBtn.onclick = () => {
      if (!user) return alert("请先加入聊天室");
      let value = textInput.value;
      if (!value) return alert("请输入内容");
      let message = {
        value,
        time: new Date().getTime(),
      };
      Object.assign(message, user);
      socket.emit("sendMessage", message);
      textInput.value = "";
    };
  </script>
</html>
